<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="${ctx }/resources/js/bootstrap/bootstrap.min.css" >
    
    <style type="text/css" media="screen">
        * {
            padding: 0;
            margin: 0;
        }
        .video-list-wrap {
            margin-top: 30px;
        }
        .video-list-wrap .pager {
            margin: 0;
        }
        .video-list-wrap .panel-body {
            padding: 0;
        }
        .video-list-wrap .list-group {
            margin: 0;
        }
        .video-list-wrap .list-group-item {
            border: 0;
            border-bottom: 1px solid #ddd;
            margin-bottom: 0;
            text-align: center;
            cursor: pointer;
        }
/*      .video-list-wrap .list-group>li:nth-child(11n) {
            border: 0;
        }*/
        .video-list-wrap .panel-heading {
            text-align: center;
        }
        .video-list-wrap .cursor {
            cursor: pointer;
            font-size: 40px;
            text-align: center;
        }
        .video-list-wrap .panel-footer {
            min-height: 50px;
        }
        .video-search-bar .row,.video-list-wrap .row {
            margin: 0;
        }
        .pager .hide-wrap {
            display:none;
        }
    </style>
</head>
<body>
    <div class="video-search-bar">
        <div class="row">
            <div class="col-xs-4">
                <select class="form-control channel">
                    <option value="0">剧集类型</option>
                    <c:forEach items="${dictList }" var="item">
                        <option value="${item.code }">${item.name }</option>
                    </c:forEach>
                    <!-- <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option> -->
                </select>
            </div>
            <div class="col-xs-4">
                <input type="text" class="form-control keyword" placeholder="剧集名称">
            </div>
            <div class="col-xs-4">
                <button type="button" class="btn btn-default" id="searchName">搜索</button>
            </div>
        </div>
    </div>
    <div class="video-list-wrap">
        <div class="row">
            <div class="col-xs-5">
                <div>未添加剧集</div>
                <div class="panel panel-default out">
                    <div class="panel-heading">剧集名称</div>
                    <div class="panel-body">
                        <ul class="list-group not-add" id="outdist"></ul>
                    </div>
                    <div class="panel-footer">
                        <nav id="pageNumber">
                            <input type="hidden" id="outPage" value="1"/>
                            <ul class="pager">
                                <li><a href="#" aria-label="Previous" id="outPrevious">上一页</a></li>
                                <li><a href="#" aria-label="Next" id="outNext">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="cursor addVideos">=></div>
                <div class="cursor removeVideos"><=</div>
            </div>
            <div class="col-xs-5">
                <div>已添加剧集</div>
                <div class="panel panel-default in">
                    <div class="panel-heading">剧集名称</div>
                    <div class="panel-body">
                        <ul class="list-group add" id="indist">
                        
                        </ul>
                    </div>
                    <div class="panel-footer">
                        <nav id="pageNumber">
                            <input type="hidden" id="inPage" value="1"/>
                            <ul class="pager">
                                <li><a href="#" aria-label="Previous" id="inPrevious">上一页</a></li>
                                <li><a href="#" aria-label="Next" id="inNext">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="${ctx}/resources/js/jquery/jquery-2.1.4.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
        var distinguishId = ${distinguishId}
        $(function(){
        	getIndist( 1, 8, null, null);
        	getOutdist( 1, 8, null, null)
        })
        var inNextFlag = true;
        var outNextFlag = true;
        var inPreviousFlag = true;
        var outPreviousFlag = true;
        var addFlag = true;
        var deleteFlag = true;
        /* $.get("1.json",function(data){
            console.log(data);
            for(var i = 0; i < data.length; i++) {
                var item = '<li class="list-group-item">'+data[i]+'</li>';
                $(".not-add").append(item);
            }
        })
        $.get("2.json",function(data){
            console.log(data);
            for(var i = 0; i < data.length; i++) {
                var item = '<li class="list-group-item">'+data[i]+'</li>';
                $(".add").append(item);
            }
            moveItem()
        }) */
        
        //未添加剧集点击上一页
        $("#outPrevious").click(function(){
        	if (!outPreviousFlag) {
				return
			}
        	outPreviousFlag = false;
        	var pgNo = Number($("#outPage").val())
	       	var channelCode = $(".channel").find("option:selected").attr("value");
        	if(channelCode == "0"){
        		channelCode = null;
        	}
        	var keyWord = $(".keyword").val();
        	if(keyWord == "" || keyWord==" "){
        		keyWord = null;
        	}
        	getOutdist(pgNo-1,8,channelCode,keyWord)
        	if(pgNo > 1){
        	    $("#outPage").val(pgNo-1)
        	}
        	console.log(pgNo-1)
        })
        //未添加剧集点击下一页
        $("#outNext").click(function(){
        	if (!outNextFlag) {
                return
            }
            outNextFlag = false;
        	var pgNo = Number($("#outPage").val())
	       	var channelCode = $(".channel").find("option:selected").attr("value");
        	if(channelCode == "0"){
        		channelCode = null;
        	}
        	var keyWord = $(".keyword").val();
        	if(keyWord == "" || keyWord==" "){
        		keyWord = null;
        	}
        	getOutdist(pgNo+1,8,channelCode,keyWord)
        	$("#outPage").val(pgNo+1)
        	console.log(pgNo+1)
        })
        //已添加剧集点击上一页
        $("#inPrevious").click(function(){
        	if (!inPreviousFlag) {
                return
            }
            inPreviousFlag = false;
            var pgNo = Number($("#inPage").val())
            var channelCode = $(".channel").find("option:selected").attr("value");
            if(channelCode == "0"){
                channelCode = null;
            }
            var keyWord = $(".keyword").val();
            if(keyWord == "" || keyWord==" "){
                keyWord = null;
            }
            getIndist(pgNo-1,8,channelCode,keyWord)
            if(pgNo > 1){
                $("#inPage").val(pgNo-1)
            }
            console.log(pgNo-1)
        })
        //已添加剧集点击下一页
        $("#inNext").click(function(){
        	if (!inNextFlag) {
                return
            }
            inNextFlag = false;
            var pgNo = Number($("#inPage").val())
            var channelCode = $(".channel").find("option:selected").attr("value");
            if(channelCode == "0"){
                channelCode = null;
            }
            var keyWord = $(".keyword").val();
            if(keyWord == "" || keyWord==" "){
                keyWord = null;
            }
            getIndist(pgNo+1,8,channelCode,keyWord)
            $("#inPage").val(pgNo+1)
            console.log(pgNo+1)
        })
        
       	var t = (new Date()).valueOf();
        function getIndist(pageNo,pageSize,channelCode,keyWord){
        	$(".add").find("li").remove();
        	$.ajax({
                type:"get",
                url:"${pageContext.request.contextPath }/distinguish/getInSeries?s="+t,
                data: { 
	                	pageNo:pageNo,
	                	pageSize:pageSize,
	                	channelCode:channelCode,
	                	keyWord:keyWord,
	                	distinguishId:distinguishId
                	   },
        	    success: function(data){
        	    	inNextFlag = true;
        	        outNextFlag = true;
        	        inPreviousFlag = true;
        	        outPreviousFlag = true; 
       	    	   var map = eval("("+data+")");
    	    	   var list = eval(map.list)
    	    	   var count = eval(map.count)
    	    	   console.log(list);
    	    	   console.log(count);
    	    	   for(var i = 0; i < list.length; i++){
    	    		   var item = '<li class="list-group-item" ondblclick="deleteOut(this)" value="'+list[i].id+'">'+list[i].name+'</li>';
    	    		   $(".add").append(item);
    	    	   }
    	    	   
    	    	   $(".in .hide-wrap").removeClass("hide-wrap")
    	    	   if(pageNo == 1 ){
    	    		   $("#inPrevious").parent().addClass("hide-wrap")
    	    	   }
    	    	   if(count <= pageNo*pageSize){
    	    		   $("#inNext").parent().addClass("hide-wrap")
    	    	   }
    	    	   
                },
                error: function(){
                	inNextFlag = true;
                    outNextFlag = true;
                    inPreviousFlag = true;
                    outPreviousFlag = true;
                }
            })
        }
        
        function getOutdist(pageNo,pageSize,channelCode,keyWord){
        	$(".not-add").find("li").remove();
        	$.ajax({
                type:"get",
                url:"${pageContext.request.contextPath }/distinguish/getOutSeries?s="+t,
                data: {
                	pageNo:pageNo,
                    pageSize:pageSize,
                    channelCode:channelCode,
                    keyWord:keyWord,
                    distinguishId:distinguishId
                },
                success: function(data){
                	inNextFlag = true;
                    outNextFlag = true;
                    inPreviousFlag = true;
                    outPreviousFlag = true;
                	var map = eval("("+data+")");
                    var list = eval(map.list)
                    var count = eval(map.count)
                    console.log(list);
                    console.log(count);
                    for(var i = 0; i < list.length; i++){
                        var item = '<li class="list-group-item" ondblclick="addIn(this)" value="'+list[i].id+'">'+list[i].name+'</li>';
                        $(".not-add").append(item);
                    }
                    
                    $(".out .hide-wrap").removeClass("hide-wrap")
                    if(pageNo == 1 ){
                        $("#outPrevious").parent().addClass("hide-wrap")
                    }
                    if(count <= pageNo*pageSize){
                        $("#outNext").parent().addClass("hide-wrap")
                    }
                    //moveItem();
                    //addIn();
                },
                error: function(){
                	inNextFlag = true;
                    outNextFlag = true;
                    inPreviousFlag = true;
                    outPreviousFlag = true;
                }
            })
        }
        //添加
        function addIn(obj) {
        	if (!addFlag) {
                return
            }
        	addFlag = false;
            //$(".not-add.list-group").on("dblclick","li",function() {
                console.log($(obj).val())
                var seriesId = $(obj).val();
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath }/distinguish/addIn.html",
                    data: {
                        seriesId:seriesId,
                        distinguishId:distinguishId
                    },
                    success: function(data){
                        var channelCode = $(".channel").find("option:selected").attr("value");
                        if(channelCode == "0"){
                            channelCode = null;
                        }
                        var keyWord = $(".keyword").val();
                        if(keyWord == "" || keyWord==" "){
                            keyWord = null;
                        }  
                        //未添加页码
                    	var pgNo = Number($("#outPage").val());
                    	//修改已添加页码
                    	$("#inPage").val(1);
                    	getIndist(1,8,channelCode,keyWord);
                    	getOutdist(pgNo,8,channelCode,keyWord);
                    	addFlag = true;
                    },
                    error: function(){addFlag = true;}
                })
            //})
        }
        //解绑
        function deleteOut(obj) {
            if (!deleteFlag) {
                return
            }
            deleteFlag = false;
            //$(".not-add.list-group").on("dblclick","li",function() {
            console.log($(obj).val())
            var seriesId = $(obj).val();
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath }/distinguish/clean.html",
                data: {
                    seriesId:seriesId,
                    distinguishId:distinguishId
                },
                success: function(data){
                    var channelCode = $(".channel").find("option:selected").attr("value");
                    if(channelCode == "0"){
                        channelCode = null;
                    }
                    var keyWord = $(".keyword").val();
                    if(keyWord == "" || keyWord==" "){
                        keyWord = null;
                    }  
                    //未添加页码
                    var pgNo = Number($("#outPage").val());
                    //修改已添加页码
                    $("#inPage").val(1);
                    getIndist(1,8,channelCode,keyWord);
                    getOutdist(pgNo,8,channelCode,keyWord);
                    deleteFlag = true;
                },
                error: function(){deleteFlag = true;}
            })
            //})
        }
        /* if($(this).parent().hasClass("add")) {
            console.log("add")
            $(this).remove();
            $(".not-add").prepend($(this));
            if($(".not-add").children().length > 11) {
                $(".not-add").children().last().remove();
            }
            
        }else {
            console.log("not-add")
            $(this).remove();
            $(".add").prepend($(this));
            if($(".add").children().length > 11) {
                $(".add").children().last().remove();
            }
            
        } */
        moveItemList()
        function moveItemList() {
            $(".addVideos").click(function() {
            	var addList = $(".not-add li");
            	var addArray = new Array();
            	for (var i = 0; i < addList.length; i++) {
            		addArray[i] = $(addList[i]).attr("value")
				}
           	    $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath }/distinguish/addListIn.html",
                    data: {
                        seriesId:JSON.stringify(addArray),
                        distinguishId:distinguishId
                    },
                    success: function(data){
                    	var channelCode = $(".channel").find("option:selected").attr("value");
                    	if(channelCode == "0"){
                    	    channelCode = null;
                    	}
                    	var keyWord = $(".keyword").val();
                    	if(keyWord == "" || keyWord==" "){
                    	    keyWord = null;
                    	}  
                    	//未添加页码
                        var pgNo = Number($("#outPage").val());
                        //修改已添加页码
                        $("#inPage").val(1);
                        getIndist(1,8,channelCode,keyWord);
                        getOutdist(pgNo,8,channelCode,keyWord);
                    },
                    error: function(){}
                 })
            	
            })
            $(".removeVideos").click(function() {
            	var removeList = $(".add li");
                var removeArray = new Array();
                for (var i = 0; i < removeList.length; i++) {
                	removeArray[i] = $(removeList[i]).attr("value")
                }
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath }/distinguish/deleteListIn.html",
                    data: {
                        seriesId:JSON.stringify(removeArray),
                        distinguishId:distinguishId
                    },
                    success: function(data){
                        var channelCode = $(".channel").find("option:selected").attr("value");
                        if(channelCode == "0"){
                            channelCode = null;
                        }
                        var keyWord = $(".keyword").val();
                        if(keyWord == "" || keyWord==" "){
                            keyWord = null;
                        }  
                        //未添加页码
                        var pgNo = Number($("#inPage").val());
                        //修改已添加页码
                        $("#outPage").val(1);
                        getIndist(pgNo,8,channelCode,keyWord);
                        getOutdist(1,8,channelCode,keyWord);
                    },
                    error: function(){}
                 })
            })
        }
        
        $("#searchName").click(function(){
        	var channelCode = $(".channel").find("option:selected").attr("value");
            if(channelCode == "0"){
                channelCode = null;
            }
            var keyWord = $(".keyword").val();
            if(keyWord == "" || keyWord==" "){
                keyWord = null;
            }  
            //未添加页码
            var pgNo = Number($("#outPage").val());
            //修改已添加页码
            $("#inPage").val(1);
            $("#outPage").val(1);
            
            getIndist(1,8,channelCode,keyWord);
            getOutdist(1,8,channelCode,keyWord); 
        })
        /* $(".add li").remove();
        $(".add").prepend($(".not-add li"))
        $(".not-add li").remove();   */            
        /* $(".not-add li").remove();
        $(".not-add").prepend($(".add li"))
        $(".add li").remove();   */    
        
    </script>
</body>
</html>